/**
 * webpack 打包配置
 * @date 2021-09-16
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const date = require('silly-datetime');

const buildDate = date.format(new Date(),'YYYYMMDD');
const TIME = date.format(new Date(),'HHmmss');

module.exports  = (env) => {
  console.log(env);
  return {
    // 模式
    mode: 'development',

    // 此选项控制是否生成，以及如何生成 source map
    devtool: 'inline-source-map',


    // 入口文件
    entry: {
      main: './src/index.js',
    },

    /**
     * 输出
     * HtmlWebpackPlugin
     */
    output: {
      filename: `static/${buildDate}_${TIME}_[name].bundle.js`,
      path: path.resolve(__dirname, 'dist'),
      clean: true,  // 清理 /dist 文件夹
    },

    /**
     * 模块配置相关
     * 如何处理项目中的不同类型的模块
     */
    module: {
      rules: [
        {
          // 加载css  npm install --save-dev style-loader css-loader
          test: /\.css$/i,    
          use: ['style-loader', 'css-loader'],
        },
        {
          // 加载图片
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
          // use: [{
          //   loader: "file-loader",
          //   options: {
          //     // name: 'images/[hash:8].[name].[ext]',
          //     // context: "dist", // 打包目录
          //     limit: 8192,
          //     publicPath: function (url) { // 访问目录
          //       return url.indexOf('logo') > 0 ? './' + url : '../' + url;
          //     }
          //   }
          // }]
        },
        {
          // 加载字体
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
        },
        {
          // 将 HTML 导出为字符串
          test: /\.html$/i,
          loader: "html-loader",
        },
        {
          // 集成 react
	        test: /\.(js|jsx|ts|tsx)$/,
	        exclude: /(node_modules|bower_components)/,
	        use: [
	          {
	            loader: 'babel-loader',
	            options: {
	              presets: ['@babel/preset-react']
	            }
	          }
	        ]
	      },
      ],
    },

    /**
     * 插件
     */
    plugins: [
      // 生成新的 index.html
      new HtmlWebpackPlugin({
        title: 'webpack demo',    // 标题
        template: 'public/index.html',   // 模板
      }),
    ],

    /**
     * webpack-dev-server(简写为：dev-server)
     * 配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下。
     */
    devServer: {
      static: './dist',
      port: '8080',
      proxy: {
        "/api": {
          target: "http://localhost:3000",
          pathRewrite: {"^/api" : ""}
        }
      },
      compress: true,     // 切服务都启用gzip 压缩
    },
    
    /**
     * 解析
     */
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src/container/'),
      }
    },

    /**
     * 性能
     */
    performance: {
      maxEntrypointSize: 100000,
      maxAssetSize: 100000
    },

    /**
     * 外部扩展
     */
    externals: {

    }
  }
};